<template>
  <div id="a">
    <div class="e">
      <div class="ee">
        <img :src="img2" alt="" />
        <img class="eee" :src="img5" alt="" />
        <div class="eeee">
          <span>按内容搜索</span>
        </div>
        <img :src="img4" alt="" />
      </div>
      <ul class="f">
        <li v-for="item in lista" :key="item.id">{{ item.name }}</li>
        <div class="ff">
          <img :src="img3" alt="" />
          <li>分类</li>
        </div>
      </ul>
    </div>
    <div class="g">
      <!-- 轮播图 -->
      <v-swiper></v-swiper>
      <ul class="gg">
        <li class="ggg" v-for="item in list" :key="item.id">
          <img :src="item.img" alt="" />
        </li>
      </ul>
      <ul class="gggg">
        <li class="ggg" v-for="item in list" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="h">
      <div class="content_main">
        <div class="left">
          <p class="hh">
            <span>限时秒杀</span>
            <span>查看更多></span>
          </p>
          <p class="hhh">每天0点场，好货秒不停</p>
          <p class="hhhh">
            <span class="hhhhh">05</span>
            <span>:</span>
            <span class="hhhhh">20</span>
            <span>:</span>
            <span class="hhhhh">48</span>
          </p>
        </div>
        <div class="right">
          <div class="top">
            <p class="hhhhhh">品牌上新</p>
            <p class="hhhhhhh">9点整，抢大牌</p>
            <p class="hhhhhhhh">
              <span>疯抢红包></span>
            </p>
          </div>
          <div class="bottom">
            <p class="i">日用好物</p>
            <p class="ii">原君多采撷</p>
            <p class="iii">
              <span>塞满奖券></span>
            </p>
          </div>
        </div>
      </div>

      <div class="j">
        <p class="jj">
          <span>双11尖货预购</span>
          <span>畅购全城</span>
        </p>
        <ul class="k">
          <li v-for="item in pics" :key="item.id">
            <img :src="item.img" alt="" />
          </li>
        </ul>
      </div>
      <van-tabs type="card">
        <van-tab title="热门推荐">
          <van-card
            v-for="item in hotgoods"
            :key="item.id"
            num="1"
            :price="item.price"
            desc="描述信息"
            :title="item.goodsname"
            :thumb="'http://localhost:3000' + item.img"
          />
        </van-tab>
        <van-tab title="上新推荐">
          <van-card
            v-for="item in newgoods"
            :key="item.id"
            num="1"
            :price="item.price"
            desc="描述信息"
            :title="item.goodsname"
            :thumb="'http://localhost:3000' + item.img"
          />
        </van-tab>
        <van-tab title="所有商品">
          <van-card
            v-for="item in goodslist"
            :key="item.id"
            num="1"
            :price="item.price"
            desc="描述信息"
            :title="item.goodsname"
            :thumb="'http://localhost:3000' + item.img"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import vSwiper from "../components/vSwiper.vue";
import { getHomeGoods } from "../util/request/api";
export default {
  data() {
    return {
      index: 1,
      img1: require("../assets/images/white.png"),
      img2: require("../assets/images/a.png"),
      img3: require("../assets/images/b.png"),
      img4: require("../assets/images/c.png"),
      img5: require("../assets/images/1.png"),
      img77: require("../assets/images/mid.png"),
      lista: [
        { id: 1, name: "推荐" },
        { id: 2, name: "女装" },
        { id: 3, name: "鞋包" },
        { id: 4, name: "居家" },
        { id: 5, name: "母婴" },
        { id: 6, name: "美妆" },
      ],
      hotgoods: [],
      goodslist: [],
      newgoods: [],
      pics: [
        {
          id: 1,
          img: require("../assets/images/01.png"),
        },
        {
          id: 2,
          img: require("../assets/images/02.png"),
        },
        {
          id: 3,
          img: require("../assets/images/03.png"),
        },
        {
          id: 4,
          img: require("../assets/images/04.png"),
        },
      ],
      list: [
        {
          id: 1,
          img: require("../assets/images/d.png"),
          name: "限时秒杀",
        },
        {
          id: 2,
          img: require("../assets/images/e.png"),
          name: "畅销商品",
        },
        {
          id: 3,
          img: require("../assets/images/f.png"),
          name: "品质大牌",
        },
        {
          id: 4,
          img: require("../assets/images/g.png"),
          name: "小U自营",
        },
        {
          id: 5,
          img: require("../assets/images/h.png"),
          name: "积分商城",
        },
      ],
    };
  },
  mounted() {
    getHomeGoods()
      .then((res) => {
        if (res.data.code == 200) {
          console.log(res);
          this.newgoods = res.data.list[0].content;
          this.hotgoods = res.data.list[1].content;
          this.goodslist = res.data.list[2].content;
        }
      })
      .catch((err) => {
        console.log(err, "错误捕获");
      });
  },
  components: {
    vSwiper,
  },
};
</script>

<style scoped>
.active {
  color: #fff !important;
  background: orange;
}
.van-tabs{
  margin-bottom: .5rem;
}
</style>